<button type="button" id="modal-control-btn" style="display:none;" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">Notiice</h4>
            </div>
            <div class="modal-body">
                <div class="alert alert-default" role="alert">
                    <strong>Attention!</strong> There is one new Merchant registed, Click Go Audit Button to check it!
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn " style="color:#777" data-dismiss="modal"><a ng-href="#">Close</a></button>
                <button type="button" class="btn btn-default" data-dismiss="modal"><a ng-href="/#!/manager/audit" >Go Audit</a></button>
            </div>
        </div>
    </div>
</div>








<div class="navbar navbar-fixed-top bs-docs-nav" role="banner" style="margin-bottom:0%">

    <div class="conjtainer">
        <!-- Menu button for smallar screens -->
        <div class="navbar-header">
            <button class="navbar-toggle btn-navbar" type="button" data-toggle="collapse" data-target=".bs-navbar-collapse">
			<span>Menu</span>
		  </button>
            <!-- Site name for smallar screens -->
            <a href="#" class="navbar-brand hidden-lg">MacBeth</a>
        </div>

        <!-- Navigation starts -->
        <nav class="collapse navbar-collapse bs-navbar-collapse" role="navigation">

            <ul class="nav navbar-nav">

                <!-- Upload to server link. Class "dropdown-big" creates big dropdown -->
                <li class="dropdown dropdown-big">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown"><span class="label label-success"><i class="icon-cloud-upload"></i></span> Upload to Cloud</a>
                    <!-- Dropdown -->
                    <ul class="dropdown-menu">
                        <li>
                            <!-- Progress bar -->
                            <p>Photo Upload in Progress</p>
                            <!-- Bootstrap progress bar -->
                            <div class="progress progress-striped active">
                                <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
                                    <span class="sr-only">40% Complete</span>
                                </div>
                            </div>

                            <hr />

                            <!-- Progress bar -->
                            <p>Video Upload in Progress</p>
                            <!-- Bootstrap progress bar -->
                            <div class="progress progress-striped active">
                                <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
                                    <span class="sr-only">80% Complete</span>
                                </div>
                            </div>

                            <hr />

                            <!-- Dropdown menu footer -->
                            <div class="drop-foot">
                                <a href="#">View All</a>
                            </div>

                        </li>
                    </ul>
                </li>

                <!-- Sync to server link -->
                <li class="dropdown dropdown-big">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown"><span class="label label-danger"><i class="icon-refresh"></i></span> Sync with Server</a>
                    <!-- Dropdown -->
                    <ul class="dropdown-menu">
                        <li>
                            <!-- Using "icon-spin" class to rotate icon. -->
                            <p><span class="label label-info"><i class="icon-cloud"></i></span> Syncing Members Lists to Server</p>
                            <hr />
                            <p><span class="label label-warning"><i class="icon-cloud"></i></span> Syncing Bookmarks Lists to Cloud</p>

                            <hr />

                            <!-- Dropdown menu footer -->
                            <div class="drop-foot">
                                <a href="#">View All</a>
                            </div>

                        </li>
                    </ul>
                </li>

            </ul>

            <!-- Search form -->
            <form class="navbar-form navbar-left" role="search">
                <div class="form-group">
                    <input type="text" class="form-control" placeholder="Search">
                </div>
            </form>
            <!-- Links -->
            <ul class="nav navbar-nav pull-right">
                <li class="dropdown pull-right">
                    <a data-toggle="dropdown" class="dropdown-toggle" href="#">
                        <i class="icon-user"></i> Admin <b class="caret"></b>
                    </a>

                    <!-- Dropdown menu -->
                    <ul class="dropdown-menu">
                        <li><a href="#"><i class="icon-user"></i> Profile</a></li>
                        <li><a href="#"><i class="icon-cogs"></i> Settings</a></li>
                        <li><a ng-href="/#!/login"><i class="icon-off"></i> Logout</a></li>
                    </ul>
                </li>

            </ul>
        </nav>

    </div>
</div>


<!-- Header starts -->
<header>
    <div class="container" style="margin-left:45%">
        <div class="row">

            <!-- Logo section -->
            <div class="col-md-6">
                <!-- Logo. -->
                <div class="logo">
                    <h1><a href="#">O2O<span class="bold"></span></a></h1>
                    <p class="meta">Admin System</p>
                </div>
                <!-- Logo ends -->
            </div>



            <!-- Data section -->
        </div>
    </div>
</header>

<!-- Header ends -->

<!-- Main content starts -->

<div class="content">

    <!-- Sidebar -->
    <div class="sidebar">
        <div class="sidebar-dropdown"><a href="#">Navigation</a>
        </div>

        <!--- Sidebar navigation -->
        <!-- If the main navigation has sub navigation, then add the class "has_sub" to "li" of main navigation. -->
        <ul id="nav">
            <!-- Main menu with font awesome icon -->
            <li><a ng-href="/#!/manager/dashboard"><i class="icon-home"></i> Dashboard</a>
                <li><a ng-href="/#!/manager/audit"><i class="icon-home"></i>Audit</a>
                </li>
                <li class="has_sub"><a ng-href="/#!/manager/bwControl/white_list"><i class="icon-list-alt"></i>White Merchant  <span class="pull-right"><i class="icon-chevron-right"></i></span></a>
                    <!--<ul>
                    <li><a ng-href="/#!/manager/audit">Audit</a></li>
                    <li><a ng-href="/#!/manager/bwControl/black_list">Black Page</a></li>
                    <li><a ng-href="/#!/manager/bwControl/white_list">Withe Page</a></li>
                </ul>-->
                </li>
                <li class="has_sub"><a ng-href="/#!/manager/bwControl/black_list"><i class="icon-file-alt"></i> Black Merchant  <span class="pull-right"><i class="icon-chevron-right"></i></span></a>
                    <!--<ul>
                    <li><a href="render_complaint.html?status=unhandle">New</a></li>
                    <li><a href="render_complaint.html?status=handle">Handle</a></li>
                </ul>-->
                </li>
                <!--<li><a ng-href="/#!/login"><i class="icon-magic"></i> All Merchant</a></li>-->

                <li style="margin-top:30%"><a ng-href="/#!/login"><i class="icon-magic"></i> Login Out</a></li>
        </ul>
    </div>

    <!-- Sidebar ends -->

    <!-- Main bar -->
    <div class="mainbar">

        <!-- Page heading -->
        <div class="page-head">
            <h2 class="pull-left" style="color:#777"><i class="icon-table"></i> Merchants</h2>

            <!-- Breadcrumb -->
            <div class="bread-crumb pull-right">
                <a ng-href="/#!/manager/audit"><i class="icon-home"></i> Home</a>
                <!-- Divider -->
                <span class="divider">/</span>
                <a ng-href="/#!/manager/dashboard" class="bread-current">Dashboard</a>
            </div>

            <div class="clearfix"></div>

        </div>
        <!-- Page heading ends -->

        <!-- Matter -->

        <ui-view></ui-view>
        <!-- Matter ends -->

    </div>

    <!-- Mainbar ends -->
    <div class="clearfix"></div>

</div>
<!-- Content ends -->

<!-- Footer starts -->
<footer>
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <!-- Copyright info -->
                <p class="copy">Copyright &copy; 2017 | <a href="#">ITA Three</a> </p>
            </div>
        </div>
    </div>
</footer>